<!--
 * @Descripttion:
 * @version:
 * @Author: ZhangXue
 * @Date: 2021-07-13 16:15:07
 * @LastEditors: ZhangXue
 * @LastEditTime: 2021-07-23 11:04:14
-->
<template>
  <div class="fd-main-content">
    <!-- 左边部分 开始 -->
    <div class="fd-left-part">
      <!-- APP分布 开始 -->
      <div class="fd-half-item">
        <light-title title="App分布" sub-title="单位：个"></light-title>
        <div class="fd-chart-box">
          <div class="fd-width-100 fd-height-100" v-if="appTypeOption.series[0].data.length">
            <draw-chart id="appType" :options="appTypeOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!appTypeOption.series[0].data.length">暂无数据</div>
        </div>
      </div>
      <!-- APP分布 结束 -->
      <!-- 平均浏览时长情况 开始 -->
      <div class="fd-half-item sort">
        <light-title title="平均浏览时长情况" sub-title="单位：分钟"></light-title>
        <div class="fd-chart-box">
          <div class="fd-width-100 fd-height-100" v-if="appViewingOption.series[0].data.length">
             <draw-chart id="appViewing" :options="appViewingOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!appViewingOption.series[0].data.length">暂无数据</div>
        </div>
      </div>
      <!-- 平均浏览时长情况 结束 -->
    </div>
    <!-- 左边部分 结束 -->
    <!-- 中间内容 开始 -->
    <div class="fd-center-part">
      <!-- 上部分内容 开始 -->
      <div class="fd-center-top">
        <div class="fd-center-title">转换情况：购物 <span class="fd-green-text">25%</span> 交友 <span class="fd-green-text">12%</span></div>
        <div class="fd-animate-box">
          <div class="fd-center-text">转换比</div>
          <ul class="fd-animation-list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul class="fd-animation-list se">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <div class="fd-center-right">
            <div class="fd-icon-list">
              <span class="fd-icon"></span>
              <div class="fd-icon-text">
                <span class="fd-name">购物转换</span>
                <span class="fd-num">153,654 <span class="fd-font16">件</span></span>
              </div>
            </div>
            <div class="fd-icon-list fd-mt10">
              <span class="fd-icon social"></span>
              <div class="fd-icon-text">
                <span class="fd-name">交友转换</span>
                <span class="fd-num">53,654 <span class="fd-font16">件</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 上部分内容 结束 -->
      <!-- 下部分内容 开始 -->
      <div class="fd-center-bottom">
        <div class="fd-bottom-title">
          APP存活时长分布 <span class="fd-right-info">单位：个</span>
        </div>
        <div class="fd-chart-box">
          <div class="fd-height-100 fd-width-100" v-if="appSurvivalOption.xAxis.data.length">
            <draw-chart id="appSurvival" :options="appSurvivalOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!appSurvivalOption.xAxis.data.length">暂无数据</div>
        </div>
      </div>
      <!-- 下部分内容 结束 -->
    </div>
    <!-- 中间内容 结束 -->
    <!-- 右边部分 开始 -->
    <div class="fd-right-part">
      <!-- 各区域下载量分布 开始 -->
      <div class="fd-half-item">
        <light-title
          title="各区域下载量分布"
          sub-title="单位：个"
        ></light-title>
        <div class="fd-chart-box">
          <div class="fd-height-100 fd-width-100" v-if="appDownloadOption.series[0].data.length">
            <draw-chart id="appDownload" :options="appDownloadOption"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!appDownloadOption.series[0].data.length">暂无数据</div>
        </div>
      </div>
      <!-- 各区域下载量分布 结束 -->
      <!-- 用户年龄段分布 开始 -->
      <div class="fd-half-item leftSort">
        <light-title title="用户年龄段分布" sub-title="单位：个"></light-title>
        <div class="fd-height-100 fd-width-100" v-if="appAgeDistribution.series[0].data.length">
            <draw-chart id="appAgeDistribution" :options="appAgeDistribution"></draw-chart>
          </div>
          <div class="fd-zwsj" v-if="!appAgeDistribution.series[0].data.length">暂无数据</div>
      </div>
      <!-- 用户年龄段分布 结束 -->
    </div>
    <!-- 右边部分 结束 -->
  </div>
</template>

<script>
// 引入标题组件
import lightTitle from "@/components/common/lightTitle";
// 引入echarts组件
import drawChart from "@/components/common/drawCharts";
import charts from "@/assets/js/common/charts.js";
export default {
  name: "appStatistics",
  components: { lightTitle, drawChart },
  data () {
    return {
      // APP类型分布图形配置属性
      appTypeOption: this._.cloneDeep(charts.pieOption),
      // 平均浏览时长情况图形配置属性
      appViewingOption: this._.cloneDeep(charts.barOption),
      // APP存活时长分布图形配置属性
      appSurvivalOption: this._.cloneDeep(charts.barOption),
      // 各区域下载量分布图形配置属性
      appDownloadOption: this._.cloneDeep(charts.horizontalVBarOption),
      // 用户年龄段分布图形配置
      appAgeDistribution: this._.cloneDeep(charts.pieOption)
    };
  },
  mounted () {
    this.getAppTypeNum();
    this.getAppViewing();
    this.getAppSurvival();
    this.getAppDownload();
    this.getAppByAge();
  },
  methods: {
    /* 请求APP类型分布数据 */
    getAppTypeNum () {
      this.$axios.get(this.$config.url.appStatistics.getAppTypeNum).then(res => {
        if (res.code !== 200) {
          this.$message.error("获取app分布数据出错!");
          this.appTypeOption.series[0].data = [];
          return;
        }
        const _arr = [];
        let _total = 0;
        if (res.data.length) {
          res.data.forEach(val => {
            const obj = {
              name: val.typeName,
              value: val.typeValue
            };
            _total += val.typeValue;
            _arr.push(obj);
          });
        }
        this.appTypeOption.title.subtext = _total;
        this.appTypeOption.series[0].data = _arr;
      });
    },
    /* 请求平均浏览时长数据*/
    getAppViewing () {
      this.$axios.get(this.$config.url.appStatistics.getAppViewingNum).then(res => {
        if (res.code !== 200) {
          this.$message.error("获取时长数据出错!");
          this.appViewingOption.series[0].data = [];
          this.appViewingOption.series[1].data = [];
          return;
        }
        const _xArr = [];
        const _yArr = [];
        if (res.data.length) {
          res.data.forEach(val => {
            _xArr.push(val.time);
            _yArr.push(val.timeValue);
          });
        }
        let _max = 0;
        _yArr.forEach(vv => {
          if (vv > _max) {
            _max = vv;
          }
        });
        const _maxArr = new Array(_yArr.length).fill(_max);
        this.appViewingOption.xAxis.data = _xArr;
        this.appViewingOption.series[0].data = _yArr;
        this.appViewingOption.series[1].data = _maxArr;
      });
    },
    /* 请求APP存活时长分布*/
    getAppSurvival () {
      this.$axios.get(this.$config.url.appStatistics.getAppSurvivalNum).then(res => {
        if (res.code !== 200) {
          this.$message.error("获取时长数据出错!");
          this.appSurvivalOption.series[0].data = [];
          this.appSurvivalOption.series[1].data = [];
          return;
        }
        const _xArr = [];
        const _yArr = [];
        if (res.data.length) {
          res.data.forEach(val => {
            _xArr.push(val.survivalTime);
            _yArr.push(val.number);
          });
        }
        let _max = 0;
        _yArr.forEach(vv => {
          if (vv > _max) {
            _max = vv;
          }
        });
        const _maxArr = new Array(_yArr.length).fill(_max);
        this.appSurvivalOption.grid.left = 60;
        this.appSurvivalOption.grid.bottom = 30;
        this.appSurvivalOption.grid.top = 30;
        this.appSurvivalOption.xAxis.data = _xArr;
        this.appSurvivalOption.series[0].itemStyle.color.colorStops[0].color = "#48da97";
        this.appSurvivalOption.series[0].itemStyle.color.colorStops[1].color = "#098b4f";
        this.appSurvivalOption.series[0].data = _yArr;
        this.appSurvivalOption.series[1].data = _maxArr;
      });
    },
    /* 请求各区域下载量分布*/
    getAppDownload () {
      this.$axios.get(this.$config.url.appStatistics.getAreaDownloadNum).then(res => {
        if (res.code !== 200) {
          this.$message.error("获取时长数据出错!");
          this.appDownloadOption.series[0].data = [];
          this.appDownloadOption.series[1].data = [];
          return;
        }
        const _xArr = [];
        const _yArr = [];
        if (res.data.length) {
          res.data.forEach(val => {
            _yArr.push(val.areaName);
            _xArr.push(val.value);
          });
        }
        let _max = 0;
        _xArr.forEach(vv => {
          if (vv > _max) {
            _max = vv;
          }
        });
        const _maxArr = new Array(_xArr.length).fill(_max);
        this.appDownloadOption.yAxis[0].data = _yArr;
        this.appDownloadOption.yAxis[1].data = _xArr;
        this.appDownloadOption.series[0].data = _xArr;
        this.appDownloadOption.series[1].data = _maxArr;
      });
    },
    /* 请求APP类型分布数据 */
    getAppByAge () {
      this.$axios.get(this.$config.url.appStatistics.getNumByAge).then(res => {
        if (res.code !== 200) {
          this.$message.error("获取app分布数据出错!");
          this.appAgeDistribution.series[0].data = [];
          return;
        }
        const _arr = [];
        let _total = 0;
        if (res.data.length) {
          res.data.forEach(val => {
            const obj = {
              name: val.ageRange,
              value: val.value
            };
            _total += val.value;
            _arr.push(obj);
          });
        }
        this.appAgeDistribution.title.subtext = _total;
        this.appAgeDistribution.series[0].radius = ["25%", "50%"];
        this.appAgeDistribution.series[0].data = _arr;
        this.appAgeDistribution.series[0].label.formatter = "{b}\n{c}：{d}%";
      });
    }

  }
};
</script>
<style lang="less" scoped>
.fd-center-part {
    width: 746px;
    height: 918px;

    .fd-center-top {
      position: relative;
      width: 100%;
      height: 629px;
      padding-top: 94px;
      background: url("../../../static/image/common/center-box-bg.png") center bottom no-repeat;

        .fd-center-title {
          position: absolute;
          height: 40px;
          line-height: 40px;
          font-size: 24px;
          font-weight: bold;
          top: 80px;
          left: 50%;
          transform: translateX(-50%);
          color: #fff;

          .fd-green-text {
            color: #62f562;
          }
        }

        .fd-animate-box{
          position: relative;
          width: 100%;
          height: 100%;
          background: url("../../../static/image/APP/center-bg.png") center no-repeat;
            &:before {
              content: "";
              position: absolute;
              width: 375px;
              height: 374px;
              background: url("../../../static/image/APP/center-plat.png") center no-repeat;
              top: 52%;
              left: 50%;
              transform: translate(-50%,-50%);
              z-index: 1;
            }

          .fd-center-text{
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            top: 55%;
            left: 50%;
            z-index: 1;
            transform: translateX(-50%);
            background: linear-gradient(180deg, #bce2ff 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .fd-animation-list {
            position: absolute;
            width: 41%;
            height: 60%;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
            overflow: hidden;

            &.se {
              li {
                animation:mymove 5s 5s infinite;

                &:nth-child(2){
                 animation:mymove 5s 4.5s infinite;
                }
                &:nth-child(3){
                  animation:mymove 5s 3.5s infinite;
                }
                &:nth-child(4){
                  animation:mymove 5s 2.5s infinite;
                }
                &:nth-child(5){
                  animation:mymove 5s 1.5s infinite;
                }
              }
            }
              li {
                position: absolute;
                width: 50px;
                height: 50px;
                left: -50px;
                background: url("@{imgUrl}/appStaticsis/icon-book.png") center no-repeat;
                background-size: 100% 100%;
                top: -10%;
                animation:mymove 5s infinite;

                &:nth-child(2){
                  background: url("@{imgUrl}/appStaticsis/icon-car.png") center no-repeat;
                  background-size: 100% 100%;
                  top: 0%;
                  animation:mymove 5s 1s infinite;
                }
                &:nth-child(3){
                  background: url("@{imgUrl}/appStaticsis/icon-diamond.png") center no-repeat;
                  background-size: 100% 100%;
                  top: 10%;
                  animation:mymove 5s 2s infinite;
                }
                &:nth-child(4){
                  background: url("@{imgUrl}/appStaticsis/icon-money.png") center no-repeat;
                  background-size: 100% 100%;
                  top: 35%;
                  animation:mymove 5s 3s infinite;
                }
                &:nth-child(5){
                  background: url("@{imgUrl}/appStaticsis/icon-book.png") center no-repeat;
                  background-size: 100% 100%;
                  top: 50%;
                  animation:mymove 5s 1s infinite;
                }
                &:nth-child(6){
                  background: url("@{imgUrl}/appStaticsis/icon-car.png") center no-repeat;
                  background-size: 100% 100%;
                  top: 75%;
                  animation:mymove 5s infinite;
                }
                &:nth-child(7){
                  background: url("@{imgUrl}/appStaticsis/icon-diamond.png") center no-repeat;
                  background-size: 100% 100%;
                  top: 90%;
                  animation:mymove 5s 3s infinite;
                }
              }
              .animation(@name, @rules){
                @keyframes @name {
                    @rules();
                }
              }
              .animation(mymove, {
                  from { left: -50px;transform: scale(1) }
                  to { left: 300px;top:45%; transform: scale(0.5) }
              })
          }

          .fd-center-right {
            width: 259px;
            height: 249px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -25px;
            padding-right: 25px;
            padding-left: 60px;
            background: url("@{imgUrl}/appStaticsis/center-left.png") center right no-repeat;

            .fd-icon-list {
              width: 100%;
              height: 120px;
              font-size: 0;
              text-align: left;

              .fd-icon {
                display: inline-block;
                width: 48px;
                height: 100%;
                background: url("@{imgUrl}/appStaticsis/icon-shopping.png") center no-repeat;

                &.social {
                  background: url("@{imgUrl}/appStaticsis/icon-social.png") center no-repeat;
                  background-size: 100%;
                }
              }

              .fd-icon-text {
                display: inline-block;
                font-size: 17px;
                vertical-align: top;
                width: calc(100% - 48px);
                height: 100%;
                padding-top: 32px;
                padding-left: 10px;

                .fd-name {
                  color: #d1edff;
                }
                .fd-num {
                  color: #00fffc;
                  font-size: 24px;
                  line-height: 34px;
                }
              }
            }
          }
        }
    }
    .fd-center-bottom {
      position: relative;
      top: -48px;
      width: 100%;
      height: 333px;
      background: url("../../../static/image/common/center-rect-bg.png") center
        no-repeat;
      padding: 50px 64px 0;

      .fd-bottom-title {
        position: absolute;
        width: 100%;
        height: 50px;
        top: 0;
        left: 0;
        background: url("@{imgUrl}/common/center-title-bg.png") center no-repeat;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        line-height: 50px;
      }
    }
}
.fd-right-info {
  position: absolute;
  right: 60px;
  font-size: 18px;
  color: #00d5ff;
  font-weight: normal;
  line-height: 50px;
}
</style>
